<template>
  <div id="home-main">
    <!--  开始标题  -->
    <div class="home-title">
      <div class="home-title-aside">
        <div class="home-title-aside-title">
          <span class="home-title-aside-title-normal">在这里，你将会体会到<br/>不一样的</span>
          <span class="home-title-aside-title-special">feel</span>
        </div>
      </div>
      <div class="home-title-main">
        <img :src="bgc">
      </div>
    </div>

    <!--  中部内容区  -->
    <div class="home-container">
      <el-row :gutter="0">
        <el-col :span="20" :offset="4">
          <div class="home-container-item clearfix">
            <div class="home-container-item-text left">
              <h3 class="home-container-item-text-title">分享您的日常</h3>
              <div class="home-container-item-text-content">您可以通过该小站来发布您的日常活动</div>
              <div class="home-container-item-text-more">more -></div>
            </div>
            <div class="home-container-item-img">
              <img :src="imgUrl" alt="图片详情">
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--  内容区  -->
    <el-row>
      <el-col :span="20" :offset="3">
        <content/>
      </el-col>
    </el-row>
    <!-- 分割线 -->
    <el-divider/>
    <!--  底部信息  -->
    <tab-bar/>
  </div>
</template>

<script>
import Carousel from "@/components/carousel/Carousel.vue";
import Content from "@/components/content/Content.vue"
import TabBar from '@/components/tabbar/TabBar.vue'

import imgUrl from '@/static/交友.jpg'

export default {
  name: "HomeContent",
  components: {
    Carousel,
    Content,
    TabBar
  },
  setup() {
    const bgc = require("@/static/home_bgc.png")

    return {
      bgc,
      imgUrl
    }
  }
}
</script>

<style lang="scss" scoped>
#home-main {

  .home-title {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    padding: 139rem 218rem;
    margin: 0 auto;
    width: 1000px;

    .home-title-aside {
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;

      .home-title-aside-title {
        font-size: 42rem;

        .home-title-aside-title-special {
          color: #409EFF;
          font-size: 45rem;
          font-weight: bolder;
          margin-left: 10rem;
        }
      }
    }

    .home-title-main {
      flex-flow: nowrap;
      flex: 1;

      img {
        width: 550rem;
        height: 550rem;
      }
    }
  }

  .home-container {

    .home-container-item {

      .home-container-item-text {
        width: 30rem;

        .home-container-item-text-content {
          margin: 1rem 0 .7rem;
        }

        .home-container-item-text-more {
          text-align: right;
        }
      }

      .home-container-item-img {

        img {
          width: 50rem;
        }
      }
    }
  }
}


.header {
  position: relative;
  height: 685px;

  .content {
    position: absolute;
    top: 200px;
    left: 200px;

    .title {
      font-size: 3.5rem;
      line-height: 6rem;
      text-align: center;

      .special-text {
        color: #409EFF;
        font-size: 4rem;
        font-weight: bolder;
      }
    }

    .func-btn {
      text-align: center;
      margin-top: 30px;

      span {
        font-size: 1.5em;
      }
    }
  }

  .bgc-img {
    position: absolute;
    right: 100px;
    top: 100px;

    img {
      height: 600px;
    }
  }
}

</style>